<template>
    <view class="line-detail" :style="pageStyle">
        <!-- 线路图片 -->
        <image class="banner" :src="detail.line_image" mode="aspectFill" />

        <!-- 线路信息 -->
        <view class="info-section">
            <text class="price">¥{{ selectedDatePrice }}</text>

            <text class="title">{{ detail.title }}</text>
            <view class="tags">
                <text v-for="tag in detail.tags" :key="tag" class="tag">{{ tag }}</text>
            </view>
        </view>

        <!-- 选择出行日期 -->
        <view class="section">
            <text class="section-title">出行日期</text>
            <!-- 日期标签列表 -->
            <view class="date-tags-container">
                <view class="date-tags">
                    <view
                        v-for="(item, index) in formattedDates"
                        :key="index"
                        class="date-tag"
                        :class="{ active: selectedDate === item.date }"
                        @click="selectDate(item)"
                    >
                        <text class="date-week">{{ item.week }}</text>
                        <text class="date-value">{{ item.day }}</text>
                        <text class="date-price">¥{{ item.price }}</text>
                        <view v-if="selectedDate === item.date" class="check-wrapper">
                            <u-icon name="checkmark" color="white" size="20"></u-icon>
                        </view>
                    </view>
                </view>
                <!-- 全部日期按钮 -->
                <view class="all-dates" @click="openCalendar">
                    <text>全部</text>
                    <text>班期</text>
                    <u-icon name="arrow-right" size="16" />
                </view>
            </view>
        </view>

        <!-- 选择出行人数 -->
        <view class="section">
            <text class="section-title">出行人数</text>
            <view class="counter-group">
                <text>成人</text>
                <u-number-box v-model="adultCount" :min="1" :max="10"></u-number-box>
            </view>
            <view class="counter-group">
                <text>儿童</text>
                <u-number-box v-model="childCount" :min="0" :max="10"></u-number-box>
            </view>
        </view>
        <!-- 日历弹窗 -->
        <u-calendar v-model="showCalendar" mode="single" @change="handleCalendarChange" />
        <!-- 线路特色 -->
        <view class="section">
            <text class="section-title">线路特色</text>
            <view class="features">
                <u-parse :html="content"></u-parse>
            </view>
        </view>

        <!-- 底部操作 -->
        <view class="bottom-actions">
            <button class="cart-btn" @click="addToCart">加入购物车</button>
            <button class="book-btn commit_btn" @click="bookNow">立即预定</button>
        </view>

        <!-- 返回顶部 -->
        <u-back-top :scroll-top="scrollTop" :top="100" />
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getLineDetail, getLinePriceList } from '@/api/lines'
import { addCart } from '@/api/user'
// 接收路由参数
const routeId = ref<string | number>(1)
const prices = ref<Record<string, number>>({})
const priceIds = ref<Record<string, number>>({})
const detail = ref<Record<string, number>>({})
onLoad((options) => {
    routeId.value = options.id
    getData(routeId.value)
    getPriceData(routeId.value)
})
const content = ref('')
const getData = async (id: string | number) => {
    const lineDetail = await getLineDetail({ id })

    if (lineDetail.tags != '' && lineDetail.tags != null) {
        lineDetail.tags = lineDetail.tags.split(',')
    }

    detail.value = lineDetail
    content.value = lineDetail?.content
}

const getPriceData = async (id: string | number) => {
    const res = await getLinePriceList({ line_id: id })
    prices.value = res.lists.reduce((acc, item) => {
        acc[item.travel_time] = Number(item.price)
        return acc
    }, {} as Record<string, number>)
    priceIds.value = res.lists.reduce((acc, item) => {
        acc[item.travel_time] = Number(item.id)
        return acc
    }, {} as Record<string, number>)
}

// 状态
const adultCount = ref(1)
const childCount = ref(0)
const scrollTop = ref(0)

// 当前选择日期
const selectedDate = ref<string>('')
const selectedDatePrice = ref<number>(0)

// 是否显示日历
const showCalendar = ref<boolean>(false)

// 格式化日期列表
const formattedDates = computed(() => {
    const dates = Object.keys(prices.value)

    return dates.map((date) => {
        const day = new Date(date)
        const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day.getDay()]
        const dayStr = `${day.getMonth() + 1}/${day.getDate()}`
        return {
            date,
            week,
            day: dayStr,
            price: prices.value[date]
        }
    })
})

// 选择日期
const selectDate = (item: any) => {
    selectedDate.value = item.date
    selectedDatePrice.value = item.price
}

// 打开日历
const openCalendar = () => {
    showCalendar.value = true
}

// 日历选择回调
const handleCalendarChange = (res: any) => {
    const selected = res.result
    const price = route.prices[selected] || 0
    selectedDate.value = selected
    selectedDatePrice.value = price
}

// 页面样式
const pageStyle = computed(() => {
    return {
        background: '#f5f5f5'
    }
})

// 加入购物车
const addToCart = async () => {
    if (!selectedDate.value) {
        uni.showToast({ title: '请选择出行日期', icon: 'none' })
        return
    }
    let data = {
        line_id: routeId.value,
        price_id: priceIds.value[selectedDate.value],
        travel_date: selectedDate.value,
        price: selectedDatePrice.value,
        adult_count: adultCount.value,
        child_count: childCount.value
    }
    const res = await addCart(data)
    if (res) {
        uni.showToast({ title: '已加入购物车' })
    } else {
        uni.showToast({ title: '加入购物车失败', icon: 'none' })
    }
}

// 立即预定
function bookNow() {
    // 验证用户是否已选择出行日期
    if (!selectedDate.value) {
        uni.showToast({ title: '请选择出行日期', icon: 'none' })
        return
    }

    // 跳转到下单页面，携带线路 ID、日期、价格、人数等信息
    uni.navigateTo({
        url: `/pages/order_confirm/order_confirm?lineId=${routeId.value}&priceId=${
            priceIds.value[selectedDate.value]
        }&date=${selectedDate.value}&price=${selectedDatePrice.value}&adultCount=${
            adultCount.value
        }&childCount=${childCount.value}`
    })
}
</script>

<style lang="scss" scoped>
.line-detail {
    padding-bottom: 120rpx;
    background-color: #f5f5f5;
}

.banner {
    width: 100%;
    height: 400rpx;
}

.info-section {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
}

.tags {
    display: flex;
    gap: 10rpx;
    margin-bottom: 10rpx;
}

.tag {
    border: 1rpx solid #07c160;
    color: #07c160;
    padding: 4rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
}

.price {
    font-size: 32rpx;
    color: #07c160;
    font-weight: bold;
    margin-right: 20rpx;
}

.date-list {
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    gap: 10rpx;
}

.date-item {
    font-size: 24rpx;
    color: #666;
}

.section {
    background-color: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
}

.date-picker {
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
}

.counter-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx 0;
}

.features {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.feature {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.feature-icon {
    width: 40rpx;
    height: 40rpx;
}

.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 99;
}

.cart-btn,
.book-btn {
    flex: 1;
    margin: 0 10rpx;
    padding: 20rpx 0;
    border-radius: 60rpx;
    font-size: 28rpx;
    font-weight: bold;
    text-align: center;
}

.cart-btn {
    background-color: #000000;
    color: white;
}

.date-tags-container {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    justify-content: space-between;
}

.date-tags {
    display: flex;
    overflow-x: auto;
    gap: 20rpx;
    margin-top: 20rpx;
    padding-bottom: 10rpx;

    &::-webkit-scrollbar {
        display: none;
    }
}

.date-tag {
    position: relative;
    border: 1rpx solid #ddd;
    flex-shrink: 0; // 禁止压缩，保持固定大小
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30rpx 20rpx;
    background-color: #f9f9f9;
    border-radius: 8rpx;
    font-size: 24rpx;
    text-align: center;

    &.active {
        background-color: #f5f5f5;
        border: 1rpx solid #1ab2a6;
    }

    .check-wrapper {
        padding: 15rpx 5rpx 5rpx 10rpx;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30rpx;
        height: 30rpx;
        background-color: #1ab2a6;
        border-radius: 100rpx 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.1);
        z-index: 2;
        transition: all 0.3s ease;
    }

    .date-week {
        font-size: 22rpx;
    }

    .date-value {
        margin: 4rpx 0;
    }

    .date-price {
        color: #07c160;
        font-weight: bold;
    }
}

.all-dates {
    margin-left: 10rpx;
    min-width: 60rpx;
    flex-shrink: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    /* 添加左侧阴影 */
    box-shadow: -8rpx 0 4rpx rgba(0, 0, 0, 0.06);
    padding: 25rpx 0;
    text-align: center;
    min-height: 180rpx;

    text {
        font-size: 20rpx;
        color: #666;
        line-height: 1.5;
        margin-bottom: 10rpx;
    }
}
</style>
